<!--群发短信：输入多个号码  选择短信模板  群发-->
<template>
  <div class="smsMass" id="smsMassWrap">
    <affix :label="$t('sms.smsMass')"></affix>
    <el-row>
      <el-col :span="12">
      <div class="send">
        <span class="phone-num">{{$t('sms.phoneNum')}}:</span>
        <el-input size="mini"
          type="textarea"
          :rows="6"
          :placeholder="$t('public.pleaseEnter')"
          resize="none"
          @keyup.native="changeSmsPhoneNum"
          v-model="form.smsPhoneNum">
        </el-input>
        <span class="cho-mo-title">{{$t('sms.chooseTempToSend')}}:</span>
        <el-select size="mini" filterable class="cho-mo" v-model.trim="selectedsms" :placeholder="$t('public.pleasePick')" @change="changeout" v-if="loading">
          <el-option
            v-for="item in smsTemplates"
            class="sms-mass-select-option"
            :label="item.displayname"
            :value="item.num">
            <b class="sms-title-b">{{ item.name }}:</b> <span>{{item.content}}</span>
          </el-option>
        </el-select>
        <!--选择模板后 展示模板内容-->
        <div class="sms-mo" id="smsBatchContentPane" v-if="cursmstemplate" v-html="cursmstemplate.contented">
        </div>
        <p class="qimo" v-if="cursmstemplate">{{cursmstemplate.signname}}</p>
        <!--信息字数和条数提示-->
        <p class="warn-text" v-html="$t('sms.reciprocalNum')"></p>
        <p class="warn-text2" v-html="$t('sms.smsPagingNum')"></p>
      </div>
      <div class="submit">
        <el-button  @click.stop="reset" class="primary_btn report_excel_btn">{{$t('public.reset')}}</el-button>
          <el-tooltip effect="dark" :content="$t('public.monitorVerTip')" :openDelay="200" transition="fade-leave" placement="bottom" v-if="isMonitorVersion">
            <el-button type="primary" class="primary_btn">{{$t('sms.send')}}</el-button>
          </el-tooltip>
        <el-button type="primary" @click.stop="sendBatchSms" :disabled="sendingState" class="primary_btn" v-if="!isMonitorVersion">{{$t('sms.send')}}</el-button>
      </div>
      </el-col>
      <!--页面右侧 说明-->
      <el-col :span="12" class="mass-attention">
        <div class="caption">
          {{$t('sms.attention')}}:<br>
          {{$t('sms.tip1')}}<br>
          {{$t('sms.tip2')}}<br>
          {{$t('sms.tip3')}}<br>
          {{$t('sms.tip4',{smsSplitBaseNum: smsSplitBaseNum})}}<br>
          {{$t('sms.tip5')}}<br>
          {{$t('sms.tip6')}}<br>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import affix from '../../ui-modules/affix/Affix.vue'
  import {replaceHtmlToStr} from '../../../utils/m7Utils'
  export default {
    name: 'smsMass',
    props: {
      refresh: String
    },
    data () {
      return {
        isMonitorVersion: false,
        loading: false,
        sendingState: false,
        smsChannels: [],
        maxWordNum: 280,
        selectedsms: '',
        smsTemplates: '',
        cursmstemplate: '',
        smsSplitBaseNum: 66,
        splitCount: 1,
        form: {
          smsPhoneNum: ''
        }
      }
    },
    methods: {
//        输入手机号
      changeSmsPhoneNum () {
        this.sendingState = false
      },
//      select 选择
      changeout (option) {
        this.sendingState = false
        for (let k = 0; k < this.smsTemplates.length; k++) {
          if (this.smsTemplates[k].num === option) {
            this.cursmstemplate = this.smsTemplates[k]
            if (this.cursmstemplate.smsChannel.length === 1) {
              let smsChan = this.cursmstemplate.smsChannel[0]
              this.smsChannels.forEach(item => {
                if (item._id === smsChan) {
                  this.maxWordNum = item.maxWordNum || 280
                }
              })
            } else {
              this.maxWordNum = this.$store.state.sms.textCount || 280
            }
            document.getElementById('smsMassWrap').getElementsByClassName('warn-text')[0].style.display = 'none'
            document.getElementById('smsMassWrap').getElementsByClassName('warn-text2')[0].style.display = 'none'
            this.$nextTick(() => {
              this.updateSmsBatchNum()
            })
          }
        }
      },
//      获得下拉框 数据
      getSmsTemplate () {
        this.$store.dispatch('getSelectSms').then((smsselsect) => {
          this.smsSplitBaseNum = this.$store.state.session.account.smsSplitBaseNum || 66
          this.loading = true
          if (smsselsect) {
            this.smsTemplates = smsselsect
//            this.cursmstemplate = this.smsTemplates[0]
//            if (this.smsTemplates[0]) {
//              this.selectedsms = this.smsTemplates[0].num
//            }
          }
        })
      },
//      群发短信
      sendBatchSms () {
        let smsMassWrap = document.getElementById('smsMassWrap')
        let nodeList = smsMassWrap.getElementsByClassName('smsTemplateVar')
        let committmpl = {}
        committmpl.nums = this.form.smsPhoneNum
        if (committmpl.nums === '') {
          this.$message.error(this.$t('sms.pleaseInpPhoneNum'))
          return false
        }
        if (!this.selectedsms) {
          this.$message.error(this.$t('sms.chooseTempToSend'))
          return false
        }
        let numArr = null
        let isHuiChe = true
        if (committmpl.nums.indexOf(',') !== -1) {
          isHuiChe = false
          numArr = committmpl.nums.split(',')
        } else {
          numArr = committmpl.nums.split('\n')
        }
//        let account = this.$store.state.session.user.account
        if (numArr.length > 50000) {
          this.$message.error(this.$t('sms.level50000'))
          return false
        }
//        if (numArr.length > 3000) {
//          if (account && account === 'N00000009376') {
//            if (numArr.length > 50000) {
//              this.$message.error(this.$t('sms.level50000'))
//              return false
//            }
//          } else {
//            this.$message.error(this.$t('sms.level3000'))
//            return false
//          }
//        }
        for (let i = 0; i < numArr.length; i++) {
//          let patrn = /^(13[0-9]{9})|(15[0-9][0-9]{8})|(18[0-9][0-9]{8})|(17[0-9][0-9]{8})|(14[0-9][0-9]{8})|(199[0-9]{8})|(166[0-9]{8})$/
//           let patrn = /^(1[0-9]{10})$/
          // if (!patrn.exec(numArr[i]) || numArr[i].length !== 11) {
          //   this.$message.error(this.$t('sms.errorPhoneNum') + numArr[i])
          //   return false
          // }
          if (/\D/g.test(numArr[i])) {
            this.$message.error(this.$t('sms.errorPhoneNum') + numArr[i])
            return false
          }
        }
        committmpl.numCount = numArr.length
        committmpl.splitCount = this.splitCount
        if (isHuiChe) {
          committmpl.nums = committmpl.nums.replace(/\n/g, ',')
        }
        committmpl.operatorStrategy = this.cursmstemplate.operatorStrategy
        committmpl.content = this.cursmstemplate.content
        committmpl.sendType = 'template'
        committmpl.templateid = this.cursmstemplate._id
        committmpl.template = committmpl.content
        committmpl.vars = this.cursmstemplate.vars
        committmpl.batchTemplateSign = this.cursmstemplate.templateSign
        let smsChannelLen = 0
        if (this.cursmstemplate.smsChannel) {
          smsChannelLen = this.cursmstemplate.smsChannel.length
        }
        if (smsChannelLen > 0) {
          committmpl.smsChannel = this.cursmstemplate.smsChannel[0]
        } else {
          this.$message.error(this.$t('sms.channelerror'))
          return
        }
        if (committmpl.operatorStrategy) {
          committmpl.yd_smsChannel = this.cursmstemplate.yd_smsChannel
          committmpl.dx_smsChannel = this.cursmstemplate.dx_smsChannel
          committmpl.lt_smsChannel = this.cursmstemplate.lt_smsChannel
          committmpl.df_smsChannel = this.cursmstemplate.df_smsChannel
        }
        for (let i = 0; i < nodeList.length; i++) {
          let j = i + 1
          committmpl['batchSmsTemplateVar' + j] = this.delSpecialChar(nodeList[i].innerText)
          committmpl.content = committmpl.content.replace('{' + j + '}', committmpl['batchSmsTemplateVar' + j])
        }
        committmpl.content = this.delSpecialChar(committmpl.content)
        if (this.cursmstemplate.sign === '') {
          this.$message.error(this.$t('sms.sendphonenameerror'))
          return
        }
        this.sendingState = true
        this.$store.dispatch('sendBatchSms', committmpl).then(response => {
//          this.sendingState = false
          if (response) {
            this.$message.success(this.$t('sms.sendsuccess'))
          } else {
            this.$message.error(this.$t('sms.sendfail'))
          }
        })
      },
//      将英文引号等转换成中文 去掉特殊字符
      delSpecialChar (content) {
        content = content.replace(/\\'/g, "'")
        content = content.replace(/\\"/g, '"')
        let contentarr = content.split('"')
        let str = ''
        let str2 = ''
        for (var j = 0; j < contentarr.length - 1; j++) {
          str += contentarr[j] + (j % 2 ? '”' : '“')
        }
        str += contentarr[j]
        contentarr = str.split("'")
        for (var m = 0; m < contentarr.length - 1; m++) {
          str2 += contentarr[m] + (m % 2 ? '’' : '‘')
        }
        str2 += contentarr[m]
        let reg1 = new RegExp('<[^<]*>', 'gi')
        str2 = str2.replace(reg1, '')
        let reg2 = new RegExp('</', 'gi')
        str2 = str2.replace(reg2, '')
        if (str2.substr(str2.length - 1, 1) === '\\' && str2.substr(str2.length - 2, 2) !== '\\\\') {
          str2 = str2 + '\\'
        }
        return str2
      },
//      发信息内容 更改时 计数
      updateSmsBatchNum () {
        let pane = document.getElementById('smsBatchContentPane')
        let paneWrap = document.getElementById('smsMassWrap')
        if (pane) {
          let span = pane.getElementsByClassName('smsTemplateVar')
          if (span) {
            let self = this
            for (var j = 0; j < span.length; j++) {
              span[j].onkeyup = function (cur) {
                self.sendingState = false
                self.$store.dispatch('getCache', {type: 'smsSign', id: self.cursmstemplate.sign}).then(curSign => {
                  let content = self.cursmstemplate.content
                  let textCount = Number(self.maxWordNum)
                  let smsSplitBaseNum = self.$store.state.session.account.smsSplitBaseNum || self.$store.state.sms.smsSplitBaseNum
                  let sign = curSign.name
                  let signLen = sign ? sign.length : 0
                  let varLength = self.cursmstemplate.vars * 3
                  let nodeList = paneWrap.getElementsByClassName('smsTemplateVar')
                  let fenzi = paneWrap.getElementsByClassName('fenzi')
                  let fenmu = paneWrap.getElementsByClassName('fenmu')
                  let pagingNum = paneWrap.getElementsByClassName('pagingNum')
                  let inputCount = 0
                  paneWrap.getElementsByClassName('warn-text')[0].style.display = 'block'
                  for (let i = 0; i < nodeList.length; i++) {
                    let lastStr = replaceHtmlToStr(nodeList[i].innerHTML)
                    if (lastStr.length < nodeList[i].innerHTML.length) { // 说明内容中包含html，去除html
                      nodeList[i].innerHTML = lastStr
                    }
                    inputCount += nodeList[i].innerText.length
                  }
                  if (fenzi && fenzi.length > 0) {
                    let fenziNum = textCount - signLen + varLength - content.length - inputCount
                    let curElement = cur.srcElement
                    if (fenziNum < 0) {
                      curElement.innerText = curElement.innerText.substr(0, curElement.innerText.length + fenziNum)
                      inputCount = inputCount + fenziNum
                      fenziNum = 0
                    }
                    fenzi[0].innerText = fenziNum
                  }
                  if (fenmu && fenmu.length > 0) {
                    fenmu[0].innerText = textCount - signLen
                  }
                  if (pagingNum && pagingNum.length > 0) {
                    if ((inputCount + content.length - varLength + signLen) > smsSplitBaseNum) {
                      let n = 1
                      let nc = parseInt((inputCount + content.length - varLength + signLen - smsSplitBaseNum) / smsSplitBaseNum)
                      let nv = (inputCount + content.length - varLength + signLen - smsSplitBaseNum) % smsSplitBaseNum
                      n += nc
                      if (nv > 0) {
                        n += 1
                      }
                      pagingNum[0].innerText = n
                      self.splitCount = n
                      paneWrap.getElementsByClassName('warn-text2')[0].style.display = 'block'
                    } else {
                      pagingNum[0].innerText = 1
                    }
                  }
                })
              }
            }
          }
        }
      },
      reset () {
        this.form.smsPhoneNum = ''
        this.sendingState = false
        let smsMassWrap = document.getElementById('smsMassWrap')
        let nodeList = smsMassWrap.getElementsByClassName('smsTemplateVar')
        for (let i = 0; i < nodeList.length; i++) {
          nodeList[i].innerText = ''
        }
        document.getElementById('smsMassWrap').getElementsByClassName('warn-text')[0].style.display = 'none'
        document.getElementById('smsMassWrap').getElementsByClassName('warn-text2')[0].style.display = 'none'
      }
    },
    watch: {
      refresh (cur, old) {
        if (cur === 'mass') {
          this.getSmsTemplate()
        }
      }
    },
    beforeMount () {
      let user = this.$store.state.session.user
      if (user.uversion && user.uversion === 'monitor') {
        this.isMonitorVersion = true
      }
      this.getSmsTemplate()
      this.$store.dispatch('getCache', {type: 'smsChannel'}).then(res => {
        this.smsChannels = res
      })
    },
    beforeUpdate () {
      this.updateSmsBatchNum()
    },
    components: {
      affix
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .smsMass
    .caption
      color $c-prompt
      font-size 12px
      line-height 24px
    .title
      color $cf-gray1
      margin 20px 0 18px 0
      font-weight normal
      position relative
      .sign
        position relative
        width 12px
        height 12px
        background #7ccdd1
        display inline-block
        z-index 3
      .text
        position relative
        display inline-block
        padding 0 8px 0 10px
        background $cf-white
        z-index 3
      &:after
        content ""
        display inline-block
        width 100%
        left 0
        border-bottom 1px dashed $cf-level2
        position absolute
        top 12px
    .send
      .phone-num
      .cho-mo-title
        color $cf-gray1
        font-size 12px
        display block
        margin-bottom 10px
      .cho-mo-title
        margin 18px 0 10px
      .cho-mo
        width 100%
        margin-bottom 20px
      .sms-mo
      .qimo
        color $cf-gray1
        font-size 12px
        margin-bottom 6px
        padding-left 6px
      .qimo
        margin-top 10px
        padding-left 10px
      .warn-text
        line-height 2
        color $cf-gray1
        display none
        .fenzi
          color $c-sub
        .fenmu
          color #f08294
      .warn-text2
        line-height 1.5
        color $cf-gray1
        margin-bottom 10px
        display none
        .pagingNum
          color $c-main
    .ui-affix
      padding-bottom 0
    .submit
      text-align right
      margin-top 20px
    .mass-attention
      padding 20px
  .sms-mass-select-option
    max-width 660px
    height auto
    word-wrap break-word
    white-space normal
    line-height 20px
    padding 10px 20px
  .sms-select-option.selected
    .sms-title-b
      color $cf-color1
  .sms-title-b
    color $cf-gray0
</style>
